<template>
	<view class="register_wrapper">
		<view class="form_lists">
		<view class="form_item">
			<view class="item_title">
				<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/shouji.svg"></image> -->
				<text>手机号码</text>
			</view>
			<input type="text" v-model="mobile" placeholder="请输入手机号码" />
		</view>
		<view class="form_item">
			<view class="item_title">
				<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/information.svg"></image> -->
				<text>验证码</text>
			</view>
			<input type="text" v-model="verifyCode" placeholder="请输入手机验证码"  class="form_item_input"/>
			<button type="warn" size="mini" class="verify_btn" :disabled='disabledVerify' @click="getVerifyCode">{{codeText}}</button>
		</view>
		<view class="form_item">
			<view class="item_title">
				<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/password.svg"></image> -->
				<text>登录密码</text>
			</view>
			<input type="password" v-model="loginPassword" placeholder="请输入密码" />
		</view>
		<view class="form_item">
			<view class="item_title">
				<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/yaoqing.svg"></image> -->
				<text>邀请码</text>
			</view>
			<input type="text" v-model="inviteCode" placeholder="请输入邀请码" />
		</view>
		</view>
		<button type="warn" class="form_btn" :disabled='disabledSubmit' @click="onRegister">注册</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '', // 手机号
				verifyCode: '', // 验证码
				loginPassword: '', // 登录密码
				inviteCode: '', // 邀请码
				codeText: '获取验证码', // 验证码按钮文本
				countdown: 60, // 倒计时
				disabledVerify: false, // 禁用验证码按钮
				disabledSubmit: false, // 禁用提交按钮
				countDownInterval: null // 倒计时定时器
			}
		},
		methods: {
			// 倒计时
			countDownFn() {
				this.codeText = '60S';
				this.disabledVerify = true;
				this.countDownInterval = setInterval(() => {
					this.countdown--;
					if (this.countdown > 0) {
						this.codeText = this.countdown + 'S';
					} else {
						clearInterval(this.countDownInterval);
						this.countdown = 60;
						this.disabledVerify = false;
						this.codeText = '获取验证码';
					}
				}, 1000)
			},

			// 获取验证码
			getVerifyCode() {

				if (this.mobile === '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return
				}
				if (!this.$util.checkMobile(this.mobile)) {
					uni.showToast({
						title: '手机号格式有误',
						icon: 'none'
					})
					return
				}
				if (this.countdown !== 60) return;

				this.countDownFn();

				this.$api.getVerifyCode({
					mobile: this.mobile,
					type: 'register'
				}, res => {
					if (res.data.type !== 'ok') {
						// 用户名已存在
						clearInterval(this.countDownInterval);
						this.disabledVerify = false;
						this.codeText = '获取验证码';
					}
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					});
				})
			},

			// 注册
			onRegister() {

				if (this.mobile === '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return
				}
				if (!this.$util.checkMobile(this.mobile)) {
					uni.showToast({
						title: '手机号格式有误',
						icon: 'none'
					})
					return
				}

				if (this.verifyCode === '') {
					uni.showToast({
						title:'验证码不能为空',
						icon:'none'
					});
					return;
				};

				if (this.loginPassword === '') {
					uni.showToast({
						title: '请设置您的密码',
						icon: 'none'
					});
					return;
				};

				if (this.loginPassword.length < 6 || this.loginPassword.length > 16) {
					uni.showToast({
						title: '密码必须在6到16位之间',
						icon: 'none'
					});
					return;
				};

				if (this.inviteCode === '') {
					uni.showToast({
						title: '请输入邀请码',
						icon: 'none'
					});
					return;
				}

				this.disabledSubmit = true // 禁用按钮，避免重复提交

				this.$api.register({
					mobile: this.mobile,
					password: this.loginPassword,
					msg_code: this.verifyCode,
					invitation_code: this.inviteCode
				}, res => {
					if (res.data.type === 'ok') {
						this.mobile = '' // 手机号
						this.verifyCode = '' // 验证码
						this.loginPassword = '' // 登录密码
						this.inviteCode = '' // 邀请码
						uni.showToast({
							title: res.data.message
						});
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/index'
							})
						}, 1500)
					} else {
						this.disabledSubmit = false
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register_wrapper {
		height: 100vh;
		background-color: #F7F7F7;
		overflow: hidden;
		padding: 20upx 20upx 0 20upx ;
		box-sizing: border-box;
	 .form_lists{
		background: #fff;
		box-shadow: 0 0 1upx 1upx rgba(0,0,0,0.1);
		border-radius: 10upx;
		padding: 0 20upx 30upx 20upx;
		box-sizing: border-box;
		overflow: hidden;
		.form_item {
			position: relative;
			.item_title {
				// display: flex;
				// justify-content: flex-start;
				// align-items: center;
				// height: 50upx;
				text{
					display: block;
					font-size: 14px;
					color: #666666;
					margin: 30upx 0 30upx 0;
				}
				// image {
				// 	width: 40upx;
				// 	height: 40upx;
				// 	margin: 0 20upx 0 40upx;
				// }
			}

			input {
				position:relative;
				display: block;
				width: 100%;
				height: 50upx;
				line-height: 50upx;
			
				// border-bottom: 1px solid rgba(0,0,0,0.1);
			}
			#999999
			input::-webkit-input-placeholder {
				color: #999999;
				}
			input:after{
			    content:"";
				position:absolute;
			    bottom:0;
			    left:0;
			    right:0;
			    border-top:1px solid rgba(0,0,0,0.1);
			    -webkit-transform:scaleY(.5);
			    -webkit-transform-origin:0 0;
			}

			.verify_btn {
				position: absolute;
				top: 63upx;
				right: 20upx;
				z-index: 999;
				border-radius: 50upx;
				background-color: #E03E4D;
			}
		}
		}

		.form_btn {
			position: fixed;
			bottom: 100upx;
			left: 0;
			width: 90%;
			transform: translateX(5%);
			// margin-top: 60upx;
			border-radius: 50upx;
			background-color: #E03E4D;
		}
		.form_item_input{
			width: 78%!important;
		}
	}
</style>
